之前寫配點功能時真的不曉得是不是卡到...呃好吧也不知道卡到什麼，總之就是一直往錯誤的方向嘗試。這幾天暫時放下配點去弄Save功能，再回來看的時候覺得邏輯一整個變得清楚很多。

實際完成如下：
https://i.imgur.com/IAsEG6t.gif

按照之前的想法，在input上綁ngModel，直接讀取使用者的輸入，每次input就改變後台的值，並減去初始值，得到增加的值存成carrerValue，每次再加總所有技能的carrerValue，就能得到職業/興趣總改變的值，再讓可配點數減去差值後，配點功能就完成了～

<input type="number" name="skill.skillName" class="form-control"
    [(ngModel)]="skill.value"  
    (click)="changeCarrerPoint()"  
    (click)="changeHobbyPoint()">

changeCarrerPoint() {
    if (this.skill.carrerChecked) {
        this.skill.carrerValue = this.skill.value;
        let variable = this.skill.carrerValue - this.skill.basicValue;
        this.skill.carrerValue = variable;
    } else {
        this.skill.carrerValue = 0;
    }
}
changeHobbyPoint() {
    if (this.skill.hobbyChecked) {
        this.skill.hobbyValue = this.skill.value;
        let variable = this.skill.hobbyValue - this.skill.basicValue;
        this.skill.hobbyValue = variable;
    } else {
        this.skill.hobbyValue = 0;
    }
}

<div *ngFor="let s of skills" class="mb-2">
    <skills [skill]="s" class="d-flex"
        (click)="getSkillTotal()" [childMessage]="getSkillTotal()">
    </skills>
</div>

getSkillTotal() {
  let varCareerTotalPoint = this.careerTotalPoint;
  let varHobbyTotalPoint = this.hobbyTotalPoint;
  this.skillTotalPoint.carrer = 0;
  this.skillTotalPoint.hobby = 0;

  for (let i = 0; i < this.skills.length; i++) {
    this.skillTotalPoint.carrer += this.skills[i].carrerValue;
    this.skillTotalPoint.hobby += this.skills[i].hobbyValue;
  }

  varCareerTotalPoint -= this.skillTotalPoint.carrer;
  this.skillTypePoint.careerPoint = varCareerTotalPoint;
  varHobbyTotalPoint -= this.skillTotalPoint.hobby;
  this.skillTypePoint.hobbyPoint = varHobbyTotalPoint;
}

Angular可以很簡單的綁定視圖上的操作與畫面，但由於變數互相連動的關係，中間需要多一層暫存值的變數，才有辦法把想要的值取出並指定給想要的對象。

目前看著程式碼有點亂，之後有空再做整理吧。總之配點功能解決了，接下來就是擲骰部分了。

= = = = =

你今天的努力，
是否有跟未來的夢想
同一個等級？